<template>
  <div class="img-warehouse">
    <!-- <div class="btn">
      <el-button type="primary" @click="$refs.upLoadImg.showFn()">
        上传图片<el-icon class="el-icon--right"><Upload /></el-icon>
      </el-button>
    </div> -->
    <div style="padding: 10px 20px">
      余额 ： <span style="color: red"> ￥{{ $thousands2(price) }} </span>
    </div>
    <el-divider />

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="用户账号" prop="username" width="180">
      </el-table-column>

      <el-table-column label="用户密码" prop="password" width="180">
      </el-table-column>

      <el-table-column label="余额" prop="price" width="180">
        <template #default="scope">
          <span style="color: red"> ￥{{ scope.row.price }} </span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="rechargeFn(scope.row)">
            充值
          </el-button>

          <!-- <el-button
            size="small"
            type="danger"
            @click="deleteDataFn(scope.row)"
          >
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 充值 -->
    <rechargePrice ref="rechargePrice" @search="getUserList"></rechargePrice>
  </div>
</template>

<script>
import { markRaw } from 'vue';
import rechargePrice from './model/rechargePrice.vue'
import { getUserInfo, deleteUserInfo } from '@/api/content.js'

export default {
  components: {
    rechargePrice: markRaw(rechargePrice)
  },
  data () {
    return {
      price: '',
      tableData: []
    };
  },
  mounted () {
    this.getBalance()
    this.getUserList()
  },
  methods: {
    // 充值
    rechargeFn (row) {
      this.$refs.rechargePrice.showFn(row)
    },

    // 删除用户
    deleteDataFn (row) {
      this.$confirm('是否确认删除该用户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDataAjax(row)
      }).catch(() => {
        // 取消逻辑
      })
    },
    // 删除
    deleteDataAjax (row) {
      deleteUserInfo({
        id: row.id
      }).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getImg()
        }
      })
    },
    // 配置图片权限
    configImg (row) {
      this.$refs.configImg.showFn(row)
    },
    // 查询余额  
    getBalance () {
      getUserInfo({
        id: sessionStorage.getItem('userId')
      }).then(res => {
        if (res.success) {
          this.price = res.data[0].price
        }
      })
    },
    // 获取用户
    getUserList () {
      getUserInfo({}).then(res => {
        if (res.success) {
          this.tableData = res.data
        }
      })
    }
  }
};
</script>

<style scoped>
.img-warehouse {
  width: 1200px;
  margin: auto;
  background: #fff;
}
.btn {
  padding: 10px 20px;
}
</style>
